<template>
    <div class="contion">
        <h2>编辑地址</h2>
        <div class="input">
            <p>收件人姓名：<el-input v-model="query.name" placeholder="收件人姓名" /></p>
            <p>省份：<el-input v-model="query.province" placeholder="xx省" /></p>
            <p>城市：<el-input v-model="query.city" placeholder="xx市" /></p>
            <p>详细地址：<el-input v-model="query.address" placeholder="详细地址" /></p>
            <p>收件人电话：<el-input v-model="query.phone" placeholder="收件人电话" /></p>
            <p>备注：<el-input v-model="query.remark" placeholder="备注" /></p>
        </div>
        <div class="button">
            <el-button @click="get_address()">保存</el-button>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {ElMessage} from 'element-plus'
import axios from 'axios'
import {useRouter} from 'vue-router'
import {useRoute} from 'vue-router'

const router = useRouter()
const route = useRoute()

let query = ref({
    name:"",
    phone:"",
    remark:"",
    province:"",
    city:"",
    address:""
})

const getaddress = () =>{
    axios.get(`http://127.0.0.1:8000/home/deta/${route.query.id}`).then(res=>{
        // console.log(res)
        query.value = res.data
    })
}

const get_address = ()=>{
    axios.put("http://127.0.0.1:8000/home/deta/",query.value).then(res=>{
        if(res.data.code == 200){
            ElMessage.success("修改成功")
            router.push("/address")
        }else{
            ElMessage.error("修改失败")
        }
    })
}

onMounted(()=>{
    getaddress()
})
</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.button button{
    margin-top: 300px;
    width: 300px;
    height: 60px;
    background-color: #E44F32;
    border: 1px solid #E44F32;
    color: #FFFFFF;
    border-radius: 15px;
}
</style>